<template>
  <div class="gunalianpanzheng_wrap">
    <div class="left_wrap">
      <div class="fenlei_wrap">
        <div class="common_title">
          <div class="common_title_name">表单分类</div>
          <div class="common_title_btns">
            <div class="title_btn_item">
              <el-button
                class="bin_button calcImport"
                type="primary"
                @click="isShowDaoruDialogFlagFn(true)"
                >导入</el-button
              >
            </div>
          </div>
        </div>
        <div class="left_list_wrap">
          <div class="left_list">
            <el-collapse class="bin_collapse_sm">
              <el-collapse-item
                v-for="item in leftList"
                :key="item.id"
                :title="item.name"
                :disabled="item.children?.length === 0"
                :name="item.id"
              >
                <div class="left_tree_list">
                  <div
                    :class="leftItemActClassFn(item2)"
                    @click="changeCurrentLeftListItemFn(item2, item)"
                    v-for="item2 in item.children"
                    :key="item2.id"
                  >
                    {{ item2.dataTableName }}
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <div class="his_wrap">
        <div class="common_title">
          <div class="common_title_name">历史操作</div>
          <div class="common_title_btns">
            <div class="title_btn_item">
              <el-button class="bin_button" type="primary" @click="allDel()"
                >一键清空</el-button
              >
            </div>
          </div>
        </div>
        <div class="his_list_wrap">
          <div class="his_list">
            <div
              class="list_item"
              v-for="(item, index) in leftbottomList"
              :key="index"
            >
              <div class="item_left">
                <div class="name" @click="openpanzheng(item)">关联判证</div>
                <div class="time">{{ item.createTime }}</div>
              </div>
              <div class="item_btn">
                <div
                  class="icon el-icon-delete"
                  @click="delHistory(item)"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right_wrap" v-if="!mapDialogData">
      <div class="common_title">
        <div class="common_title_tabbar">
          <div
            :class="['tabbar_item', item.isActive && 'act']"
            v-for="item in currentLeftItemArr"
            :key="item.id"
            @click="onChangeTabbarItemFn(item)"
          >
            <div class="tabbar_item_name" style="cursor: pointer">
              {{ item.fatherName }}/{{ item.dataTableName }}
            </div>
            <div
              class="tabbar_icon el-icon-close"
              @click.stop="onDelTabbarItemFn(item)"
            ></div>
          </div>
        </div>
        <div class="common_title_btns">
          <div class="title_btn_item">
            <el-button
              class="bin_button"
              type="primary"
              v-if="this.$route.query.name"
              @click="returnBack"
              >返回</el-button
            >
            <el-button
              class="bin_button panzhengBtn"
              type="primary"
              @click="isPanzhengShengchengSubmitFn"
              >判证生成</el-button
            >
          </div>
        </div>
      </div>
      <div class="shuju_table_warpper">
        <!-- 右侧点击tab的数据表格和分页-->
        <div
          class="shuju_table_wrap"
          v-for="(ele, index) in currentLeftItemArr"
          :key="ele.id"
          v-show="ele.isActive"
        >
          <div class="shuju_table">
            <el-table
              class="bin_table"
              :border="true"
              style="width: 100%"
              height="style"
              row-key="kid"
              :data="ele.tableData"
              @selection-change="
                (val) => {
                  handleSelectionRightTableChange(val, index);
                }
              "
            >
              <el-table-column
                type="selection"
                :reserve-selection="true"
                width="55"
              ></el-table-column>
              <!-- :selectable="isNotCheckoutTableCheckoutItemFn" -->
              <el-table-column
                min-width="170"
                v-for="item in ele.rowArr"
                sortable
                :key="item.dataColumnId"
                :prop="item.columnCode"
                :label="item.columnName"
              >
              </el-table-column>
              <el-table-column label="操作" min-width="140" align="center">
                <template slot-scope="scope">
                  <div class="caozuo_btns">
                    <div
                      class="icon el-icon-edit"
                      @click="onRightTableEditFn(scope.row, ele, index)"
                    ></div>
                    <div
                      class="icon el-icon-delete"
                      @click="onRightTableDelFn(scope.row, ele, index)"
                    ></div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="shuju_fenye">
            <div class="pageBox">
              <!-- <div class="pageInfo">
                <span class="size">{{ ele.pageSize }}</span>
                <span>条每页，共{{ ele.pageTotal }}条</span>
              </div> -->
              <!-- :pager-count="5" -->
              <!-- layout=" prev, pager, next" -->
              <el-pagination
                class="bin_fenyeqi"
                :current-page.sync="ele.pageNumber"
                :page-size="ele.pageSize"
                :page-sizes="[10, 50, 100, 200, 500, 1000]"
                prev-text="上一页"
                next-text="下一页"
                popper-class="bin_fenyeqi_popper"
                layout="total, sizes,->,prev, pager, next"
                @current-change="
                  (val) => {
                    changeRightTableFenyeFn(val, ele, index);
                  }
                "
                @size-change="
                  (val) => {
                    changeRightTableFenyeSizeChange(val, ele, index);
                  }
                "
                :total="ele.pageTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right_wrap" v-else>
      <div class="common_title">
        <div class="common_title_tabbar">
          <div class="title">判证生成</div>
        </div>
        <div class="common_title_btns">
          <div
            class="close"
            @click="
              mapDialogData = false;
              ispanzheng = false;
              resetPzscDataFn();
            "
          >
            +
          </div>
        </div>
      </div>
      <div class="shaixuan_dialog_wrap">
        <div class="shaixuan_from_wrap">
          <div class="shaixuan_form_box">
            <div
              class="shaixuan_title"
              v-if="typeName"
              style="margin: 10px auto"
            >
              确认将{{ typeName }}进行判证生成吗？
            </div>
            <div class="shaixuan_title" style="margin: 10px auto">筛选条件</div>

            <div class="shaixuan_form">
              <div class="shaixuan_item_wrap">
                <div class="form_item">
                  <div class="item_name">态势数据日期表头：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入（示例：更新日期）"
                      v-model="form.situationDataDateColumn"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
                <div class="form_item">
                  <div class="item_name">态势数据时间表头：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入（示例：更新时间）"
                      v-model="form.situationDataTimeColumn"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div class="shaixuan_item_wrap">
                <div class="form_item">
                  <div class="form_item">
                    <div class="item_name">经度表头：</div>
                    <div class="item_val">
                      <el-input
                        class="bin_input"
                        placeholder="请输入（示例：经度）"
                        v-model="form.situationDataLongitudeColumn"
                        :disabled="ispanzheng"
                      ></el-input>
                    </div>
                  </div>
                  <div class="form_item">
                    <div class="item_name">纬度表头：</div>
                    <div class="item_val">
                      <el-input
                        class="bin_input"
                        placeholder="请输入（示例：纬度）"
                        v-model="form.situationDataLatitudeColumn"
                        :disabled="ispanzheng"
                      ></el-input>
                    </div>
                  </div>
                </div>
              </div>
              <div class="shaixuan_item_wrap">
                <div class="form_item">
                  <div class="item_name">名称表头：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入（示例：目标名称）"
                      v-model="form.situationDataTargetNameColumn"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div class="shaixuan_item_wrap">
                <div class="form_item">
                  <div class="item_name">信号数据开始日期表头：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入（示例：开始日期）"
                      v-model="form.signalDataStartDateColumn"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
                <div class="form_item">
                  <div class="item_name">信号数据开始时间表头：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入（示例：开始时间）"
                      v-model="form.signalDataStartTimeColumn"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div class="shaixuan_item_wrap">
                <div class="form_item">
                  <div class="item_name">信号数据结束日期表头：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入（示例：结束日期）"
                      v-model="form.signalDataEndDateColumn"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
                <div class="form_item">
                  <div class="item_name">信号数据结束时间表头：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入（示例：结束时间）"
                      v-model="form.signalDataEndTimeColumn"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div class="shaixuan_item_wrap">
                <div class="form_item">
                  <div class="item_name">筛选的开始时间：</div>
                  <div class="item_val">
                    <el-date-picker
                      v-model="form.startTime"
                      class="bin_datetime"
                      popper-class="bin_datetime_popper"
                      style="width: 100%; border: none"
                      type="datetime"
                      placeholder="请输入开始时间戳(格式为'yyyy-MM-dd HH:mm:ss')"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :disabled="ispanzheng"
                    >
                    </el-date-picker>
                  </div>
                </div>
                <div class="form_item">
                  <div class="item_name">筛选的结束时间：</div>
                  <div class="item_val">
                    <el-date-picker
                      v-model="form.endTime"
                      class="bin_datetime"
                      popper-class="bin_datetime_popper"
                      style="width: 100%; border: none"
                      type="datetime"
                      placeholder="请输入结束时间戳(格式为'yyyy-MM-dd HH:mm:ss')"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :disabled="ispanzheng"
                    >
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div class="shaixuan_item_wrap">
                <div class="form_item">
                  <div class="item_name">最小经度：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入最小经度"
                      v-model="form.minLongitude"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
                <div class="form_item">
                  <div class="item_name">最大经度：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入最大经度"
                      v-model="form.maxLongitude"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div class="shaixuan_item_wrap">
                <div class="form_item">
                  <div class="item_name">最小纬度：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入最小纬度"
                      v-model="form.minLatitude"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
                <div class="form_item">
                  <div class="item_name">最大纬度：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入最大纬度"
                      v-model="form.maxLatitude"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div class="shaixuan_item_wrap">
                <div class="form_item">
                  <div class="item_name">圆心经度：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入圆心经度"
                      v-model="form.centerLongitude"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
                <div class="form_item">
                  <div class="item_name">圆心纬度：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入纬度"
                      v-model="form.centerLatitude"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div class="shaixuan_item_wrap">
                <div class="form_item">
                  <div class="item_name">圆的半径：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入圆的半径"
                      v-model="form.radius"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
                <div class="form_item">
                  <div class="item_name">名称列表：</div>
                  <div class="item_val">
                    <el-input
                      class="bin_input"
                      placeholder="请输入名称列表"
                      v-model="form.nameList"
                      :disabled="ispanzheng"
                    ></el-input>
                  </div>
                </div>
              </div>
            </div>
            <div class="shaixuan_btns" v-if="!ispanzheng">
              <el-button
                class="bin_button"
                @click="isShowPanzhengDialogFn(false)"
              >
                取消
              </el-button>
              <el-button class="bin_button" @click="onShaixuanSubmitFn1">
                确认
              </el-button>
            </div>
          </div>

          <!-- lon 经度；lat：纬度；NameColumn：名称表头 -->
          <mapDialog
            ref="mapDialog"
            :mapShipListobj="mapShipList"
            :objarrr="objarrr"
            :lon="form.situationDataLongitudeColumn"
            :lat="form.situationDataLatitudeColumn"
            :NameColumn="form.situationDataTargetNameColumn"
            :maxLongitude="form.maxLongitude"
            :minLongitude="form.minLongitude"
            :maxLatitude="form.maxLatitude"
            :minLatitude="form.minLatitude"
          />
          <!--  -->
          <div class="common_title common_table_box">
            <div class="common_title_tabbar">
              <div
                :class="['tabbar_item', item.isActive && 'act']"
                v-for="item in hitDataInfos"
                :key="item.id"
                @click="onChangeTabbarItemFnbottom(item)"
              >
                <!--  -->
                <div class="tabbar_item_name">
                  {{ item.afterCorrelationJudgmentTableName }}
                </div>

                <div
                  class="tabbar_icon el-icon-close"
                  @click.stop="onDelTabbarItemFn(item)"
                ></div>
              </div>
            </div>
          </div>
          <div
            class="shuju_table_wrap"
            v-for="(ele, index) in hitDataInfos"
            :key="ele.id"
            v-show="ele.isActive"
          >
            <div class="shuju_table">
              <el-table
                class="bin_table"
                :border="true"
                style="width: 100%"
                height="style"
                row-key="kid"
                :data="ele.afterCorrelationJudgmentData"
              >
                <!-- @selection-change="(val) => { handleSelectionRightTableChange(val, index);}" -->
                <el-table-column
                  type="selection"
                  :reserve-selection="true"
                  :selectable="isNotCheckoutTableCheckoutItemFn"
                  width="55"
                ></el-table-column>
                <el-table-column
                  min-width="170"
                  v-for="item in ele.afterCorrelationJudgmentColumn"
                  sortable
                  :key="item.dataColumnId"
                  :prop="item.columnName"
                  :label="item.columnName"
                >
                  <template slot-scope="scope">
                    {{ scope.row.dataInfo[item.columnName] }}
                    <!-- ===
                    {{  }} -->
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="140" align="center">
                  <template slot-scope="scope">
                    <div class="caozuo_btns">
                      <div
                        class="icon el-icon-edit"
                        @click="onRightTableEditFnBot(scope.row, ele, index)"
                      ></div>
                      <div
                        class="icon el-icon-delete"
                        @click="onRightTableDelFnBot(scope.row, ele, index)"
                      ></div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <el-dialog :closeOnClickModal="false" title="判证生成" :visible.sync="panzhengDialogFlag" @close="resetPzscDataFn" class="bin_dialog" width="40%">
      <div class="shaixuan_dialog_wrap">
        <div class="shaixuan_from_wrap">
          <div class="shaixuan_title">筛选条件</div>
          <div class="shaixuan_form">
            <div class="shaixuan_item_wrap">
              <div class="form_item">
                <div class="item_name">时间范围：</div>
                <div class="item_val">
                  <el-date-picker v-model="form.timeArr" class="bin_datetime" type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss" popper-class="bin_datetime_popper" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div class="shaixuan_item_wrap">
              <div class="form_item">
                <div class="item_name">最大经度：</div>
                <div class="item_val">
                  <el-input class="bin_input" placeholder="请输入经度" v-model="form.lonLatItem1[0]"></el-input>
                </div>
              </div>
              <div class="form_item">
                <div class="item_name">最小经度：</div>
                <div class="item_val">
                  <el-input class="bin_input" placeholder="请输入经度" v-model="form.lonLatItem2[0]"></el-input>
                </div>
              </div>

            </div>
            <div class="shaixuan_item_wrap">
              <div class="form_item">
                <div class="item_name">最大纬度：</div>
                <div class="item_val">
                  <el-input class="bin_input" placeholder="请输入纬度" v-model="form.lonLatItem1[1]"></el-input>
                </div>
              </div>
              <div class="form_item">
                <div class="item_name">最小纬度：</div>
                <div class="item_val">
                  <el-input class="bin_input" placeholder="请输入纬度" v-model="form.lonLatItem2[1]"></el-input>
                </div>
                </div>
              </div>
            </div>
          </div>
          <div class="shaixuan_btns">
            <el-button class="bin_button" @click="isShowPanzhengDialogFn(false)">取消</el-button>
            <el-button class="bin_button" @click="onShaixuanSubmitFn">确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog> -->
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      title="导入文件"
      :visible.sync="daoruFileFlag"
      class="bin_dialog dialog-1200"
      @close="resetDaoruDataFn"
      @open="glpzGetDaoruCascaderFn"
      width="80%"
      top="10vh"
    >
      <div class="daoru_file_wrap">
        <div class="daoru_search_wrap">
          <div class="daoru_search_list">
            <div class="search_item">
              <div class="item_name">文件类型：</div>
              <div class="item_val">
                <el-cascader
                  v-model="daoruCascaderArr"
                  :options="daoruCascaderOptions"
                  :props="daoruCascaderProps"
                  collapse-tags
                  class="bin_cascader"
                  popper-class="bin_cascader_popper"
                  clearable
                ></el-cascader>
              </div>
            </div>
            <div class="search_item">
              <div class="item_name">文件名称：</div>
              <div class="item_val">
                <el-input
                  v-model="daoruNameInputVal"
                  placeholder="请输入内容"
                  class="bin_input"
                ></el-input>
              </div>
            </div>
            <div class="search_item">
              <div class="item_name">生成时间：</div>
              <div class="item_val">
                <el-date-picker
                  v-model="daoruCreateTimeArr"
                  class="bin_datetime"
                  type="daterange"
                  popper-class="bin_datetime_popper"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="daoru_search_btn">
            <el-button
              class="bin_button"
              size="small"
              @click="getSearchDaoruTablesDataFn"
              >搜索</el-button
            >
          </div>
        </div>
        <div class="daoru_tabbar_warp">
          <div class="daoru_tabbar">
            <div
              :class="['daoru_tabbar_item', item.isActive && 'act']"
              v-for="(item, index) in daoruTabbarAndTableDataArr"
              :key="item.myIdStrs"
              @click="changeActiveDaoruTableDataFn(item, index)"
            >
              <div class="tabbar_item_name">{{ item.tabbarName }}</div>
            </div>
          </div>
        </div>
        <div class="daoru_table_wrap">
          <div
            class="daoru_table_item"
            v-for="(ele, index) in daoruTabbarAndTableDataArr"
            :key="ele.myIdStrs"
            v-show="ele.isActive"
          >
            <div class="daoru_table">
              <el-table
                class="bin_table"
                :border="true"
                style="width: 100%"
                height="style"
                row-key="kid"
                :data="ele.tableData"
                @selection-change="
                  (val) => {
                    handleSelectionChange(val, index);
                  }
                "
              >
                <el-table-column
                  type="selection"
                  :reserve-selection="true"
                  width="55"
                ></el-table-column>
                <el-table-column
                  min-width="170"
                  :prop="item.columnCode"
                  :label="item.columnName"
                  v-for="item in ele.rowArr"
                  sortable
                  :key="item.dataColumnId"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="daoru_fenye">
              <div class="pageBox">
                <!-- <div class="pageInfo">
                  <span class="size">{{ ele.pageSize }}</span>
                  <span>条每页，共{{ ele.pageTotal }}条</span>
                </div> -->
                <!-- :pager-count="5" -->
                <!-- layout=" prev, pager, next" -->
                <el-pagination
                  class="bin_fenyeqi"
                  :current-page.sync="ele.pageNumber"
                  :page-size="ele.pageSize"
                  :page-sizes="[10, 50, 100, 200, 500, 1000]"
                  prev-text="上一页"
                  next-text="下一页"
                  popper-class="bin_fenyeqi_popper"
                  layout="total, sizes,->,prev, pager, next"
                  @current-change="
                    (val) => {
                      changeDaoruTableFenyeFn(val, ele, index);
                    }
                  "
                  @size-change="
                    (val) => {
                      changeDaoruTableFenyeSizeChange(val, ele, index);
                    }
                  "
                  :total="ele.pageTotal"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="daoru_btm_btns">
        <el-button
          class="bin_button"
          @click="isShowDaoruDialogFlagFn(false)"
          style="margin-right: 20px"
          >取消</el-button
        >
        <el-button
          class="bin_button"
          @click="glpzDaoruSubmitFn"
          style="margin-left: 20px"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      title="修改"
      :visible.sync="editDialogFlag"
      class="bin_dialog dialog-1000"
      width="50%"
    >
      <div class="edit_dialog_wrap">
        <div
          class="edit_dialog_form"
          v-if="editDialogObj?.fromItem?.dataContentList"
        >
          <div
            class="edit_from_item"
            v-for="(item, index) in editDialogObj.fromItem.dataContentList"
            :key="index"
            v-show="item.isEdit"
          >
            <div class="item_name">{{ item.rowName }}：</div>
            <div class="item_val">
              <el-input
                v-model="item.value"
                class="bin_input"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="edit_dialog_btns">
          <el-button class="bin_button" @click="editDialogCancelFn"
            >取消</el-button
          >
          <el-button class="bin_button" @click="editDialogSubmitFn"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mapDialog from "./components/newmapDialog.vue";
export default {
  components: { mapDialog },
  props: {
    showbutton: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      panzhengDialogFlag: false,
      // form: {
      //   situationDataDateColumn: '',//态势数据日期表头
      //   situationDataTimeColumn: '',//态势数据时间表头
      //   situationDataLongitudeColumn: '',//经度表头
      //   situationDataLatitudeColumn: '',//纬度表头
      //   situationDataTargetNameColumn: '',//名称表头
      //   signalDataStartDateColumn: '',//信号数据开始日期表头
      //   signalDataStartTimeColumn: '',//信号数据开始时间表头
      //   signalDataEndDateColumn: '',//信号数据结束日期表头
      //   signalDataEndTimeColumn: '',//信号数据结束时间表头
      //   startTime: '',//开始时间
      //   endTime: '',//结束时间
      //   minLongitude: '',//最小经度
      //   maxLongitude: '',//最大经度
      //   minLatitude: '',//最小纬度
      //   maxLatitude: '',//最大纬度
      //   centerLongitude: '',//圆心经度
      //   centerLatitude: '',//圆心纬度
      //   radius: '',//圆的半径
      //   nameList: '',//名称列表
      // },
      form: {
        situationDataDateColumn: "更新日期", //态势数据日期表头
        situationDataTimeColumn: "更新时间", //态势数据时间表头
        situationDataLongitudeColumn: "经度", //经度表头
        situationDataLatitudeColumn: "纬度", //纬度表头
        situationDataTargetNameColumn: "目标名称", //名称表头
        signalDataStartDateColumn: "开始日期", //信号数据开始日期表头
        signalDataStartTimeColumn: "开始时间", //信号数据开始时间表头
        signalDataEndDateColumn: "结束日期", //信号数据结束日期表头
        signalDataEndTimeColumn: "结束时间", //信号数据结束时间表头
        startTime: "", //开始时间
        endTime: "", //结束时间
        minLongitude: "100.0", //最小经度
        maxLongitude: "129.0", //最大经度
        minLatitude: "20.0", //最小纬度
        maxLatitude: "40.0", //最大纬度
        centerLongitude: "105", //圆心经度
        centerLatitude: "30", //圆心纬度
        radius: "10000", //圆的半径
        nameList: "", //名称列表
      },
      leftList: [],
      leftbottomList: [],
      currentLeftItemArr: [],
      currentLeftItemArr1: [
        {
          isActive: true,
          id: 1,
          fatherName: "fatherName",
          dataTableName: "dataTableName",
        },
      ],
      hitDataInfos: [],
      mapDialog: false,
      daoruFileFlag: false,
      daoruCascaderOptions: [],
      daoruCascaderProps: {
        multiple: true,
        value: "UID",
        label: "dataTableName",
        children: "dataTableVoList",
      },
      daoruCascaderArr: [],
      daoruNameInputVal: "",
      daoruCreateTimeArr: [],
      daoruTabbarAndTableDataArr: [],
      editDialogFlag: false,
      editDialogObj: {
        currentItem: null,
        currentIndex: null,
        fromItem: null,
      },
      panzhengshengchengCurrentArr: [],
      mapDialogData: false,
      typeName: "",
      mapShipList: {}, //存放地图右侧数据
      ispanzheng: false,
      objarrr: {},
    };
  },
  watch: {
    currentLeftItemArr(val) {
      // console.log(val, "currentLeftItemArr")
    },
    daoruTabbarAndTableDataArr(val) {
      console.log(val, "daoruTabbarAndTableDataArr");
    },
  },
  mounted() {
    this.getLeftTreeAllDataFn();
    this.getHistoryList();
  },
  methods: {
    delHistory(item) {
      this.$api.deleteCorrelationJudgmentHis([item.id]).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getHistoryList();
        }
      });
    },
    allDel() {
      let arr = this.leftbottomList.map((item) => item.id);
      console.log(arr, "arr");
    },
    getHistoryList() {
      this.$api.queryCorrelationJudgmentHis().then((res) => {
        this.leftbottomList = res.result;
      });
    },
    openpanzheng(item) {
      console.log(this.leftbottomList, "  this.leftbottomList");
      this.objarrr = item;
      // 点击关联判证
      this.ispanzheng = true;
      this.$api.queryCorrelationJudgmentHisDetails(item.id).then((res) => {
        this.mapDialogData = true;
        let correlationJudgmentCondition = JSON.parse(
          res.result.correlationJudgmentHisRecord.correlationJudgmentCondition
        );
        console.log(
          correlationJudgmentCondition,
          "点击关联判阵correlationJudgmentCondition"
        );
        this.form = correlationJudgmentCondition;
        this.form.startTime = this.formatDate(
          correlationJudgmentCondition.startTime
        );
        console.log("this.startTime", this.form.startTime);

        this.form.endTime = this.formatDate(
          correlationJudgmentCondition.endTime
        );

        this.mapShipList = res.result.correlationJudgmentHisRecordInfo;
        res.result.hitDataInfos.forEach((item) => {
          if (item.afterCorrelationJudgmentData) {
            item.afterCorrelationJudgmentData.map((v) => {
              v.dataInfo = JSON.parse(v.dataInfo);
            });
          }
        });
        this.hitDataInfos = res.result.hitDataInfos;
      });
    },
    // 右上一键清空
    clearAllData() {
      this.$api.glpzClearLeftTreeListApi().then(() => {
        this.getLeftTreeAllDataFn();
        this.$message({
          type: "success",
          message: "清空成功!",
        });
      });
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~左侧树逻辑~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 左侧数的选择
    changeCurrentLeftListItemFn(item, fatherItem) {
      let flag = this.currentLeftItemArr.some((ele) => {
        return ele.id === item.id;
      });
      if (!flag) {
        let newItem = {
          ...item,
          fatherName: fatherItem.name,
          fatherType: fatherItem.type,
          rowArr: [],
          tableData: [],
          pageNumber: 1,
          pageSize: 10,
          pageTotal: 0,
          checkoutArr: [],
        };
        this.currentLeftItemArr = [...this.currentLeftItemArr, newItem];
      } else {
        this.currentLeftItemArr = this.currentLeftItemArr.filter((ele) => {
          return ele.id !== item.id;
        });
      }
      console.log(this.currentLeftItemArr, "this.currentLeftItemArr");
    },

    // 左侧激活样式
    leftItemActClassFn(item) {
      let flag = this.currentLeftItemArr.some((ele) => {
        return ele.id === item.id;
      });
      if (flag) {
        return "left_item act";
      } else {
        return "left_item";
      }
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~右侧table内容部分逻辑 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 修改右侧tabbar
    async onChangeTabbarItemFn(item) {
      let flag = this.currentLeftItemArr.some((ele) => {
        return ele.id === item.id && ele.isActive;
      });
      if (!flag) {
        if (!item.rowArr.length) {
          let resItem = await this.glpzGetAllRightTableAndRowDataFn(item);
          let newItem = { ...item, isActive: true, ...resItem };
          let newArr = this.currentLeftItemArr.map((ele) => {
            if (ele.id === item.id) {
              return newItem;
            } else {
              return { ...ele, isActive: false };
            }
          });
          this.currentLeftItemArr = newArr;
        } else {
          let newArr = this.currentLeftItemArr.map((ele) => {
            return { ...ele, isActive: ele.id === item.id };
          });
          this.currentLeftItemArr = newArr;
        }
      }
    },
    // 修改右侧底部tabbar
    onChangeTabbarItemFnbottom(item) {
      let flag = this.hitDataInfos.some((ele) => {
        return (
          ele.afterCorrelationJudgmentTableId ===
            item.afterCorrelationJudgmentTableId && ele.isActive
        );
      });
      if (!flag) {
        let newItem = { ...item, isActive: true };
        let newArr = this.hitDataInfos.map((ele) => {
          if (
            ele.afterCorrelationJudgmentTableId ===
            item.afterCorrelationJudgmentTableId
          ) {
            return newItem;
          } else {
            return { ...ele, isActive: false };
          }
        });
        this.hitDataInfos = newArr;
      }
    },
    // 删除tabbar-item
    onDelTabbarItemFn(item) {
      this.$confirm("是否关闭改选项卡", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let arr = JSON.parse(JSON.stringify(this.currentLeftItemArr));
        let newArr = arr.flatMap((ele) => {
          if (ele.id === item.id) {
            return [];
          } else {
            return [ele];
          }
        });
        this.typeName = "";
        console.log(newArr, "newArrnewArr");
        this.currentLeftItemArr = newArr;
      });
    },
    // 获取右侧的完整数据进行组合
    async glpzGetAllRightTableAndRowDataFn(item) {
      let TABLERES = await this.glpzGetRightTableDataFn(item);
      let ROWRES = await this.glpzGetRightTableRowFn(item.id);
      let TABLEARR = TABLERES.list.map((ele) => {
        return { ...ele, ...JSON.parse(ele.dataInfo) };
      });
      return { rowArr: ROWRES, tableData: TABLEARR, pageTotal: TABLERES.total };
    },
    // 获取右侧表格的数据
    async glpzGetRightTableDataFn(item) {
      let params = {
        importDataTableId: item.id,
        pageNum: item.pageNumber,
        pageSize: item.pageSize,
      };
      let res = await this.$api.glpzGetRightTableDataApi(params);
      return res.result;
    },
    // 获取右侧表格的列名
    async glpzGetRightTableRowFn(importDataTableId) {
      let params = {
        isCorrelationJudgmentAfter: "0",
        importDataTableId,
      };
      let res = await this.$api.glpzGetRightTableRowApi(params);
      let newArray11 = res.result.sort((a, b) => {
        return a.columnIndex - b.columnIndex;
      });
      return newArray11;
    },
    // 右侧数据的table-分页
    async changeRightTableFenyeFn(val, ele, index) {
      let newArr = JSON.parse(JSON.stringify(this.currentLeftItemArr));
      let newEle = { ...ele, pageNumber: val };
      let tableItem = await this.glpzGetAllRightTableAndRowDataFn(newEle);
      let newItems = { ...ele, ...tableItem };
      newArr[index] = { ...newItems };
      this.currentLeftItemArr = newArr;
    },
    // 右侧数据的table-分页选择器
    async changeRightTableFenyeSizeChange(val, ele, index) {
      let newArr = JSON.parse(JSON.stringify(this.currentLeftItemArr));
      console.log("分页选择数据", ele, val, index);
      let newEle = { ...ele, pageSize: val };
      let tableItem = await this.glpzGetAllRightTableAndRowDataFn(newEle);
      let newItems = { ...ele, ...tableItem };
      newArr[index] = { ...newItems };
      this.currentLeftItemArr = newArr;
    },
    // 表格中的删除
    onRightTableDelFn(item, ele, index) {
      this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let data = [item.id];
        let res = await this.$api.glpzRightTableItemDelApi(data);
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          let newArr = JSON.parse(JSON.stringify(this.currentLeftItemArr));
          let newEle = { ...ele, pageNumber: 1 };
          let tableItem = await this.glpzGetAllRightTableAndRowDataFn(newEle);
          let newItems = { ...ele, ...tableItem };
          newArr[index] = { ...newItems };
          this.currentLeftItemArr = newArr;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    onRightTableDelFnBot(item, ele, index) {
      console.log("111");
      this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let data = [item.id];
        let res = await this.$api.glpzRightTableItemDelApi(data);
        if (res.code === 200) {
          if (this.ispanzheng) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            let newArr = JSON.parse(JSON.stringify(this.currentLeftItemArr));
            console.log(ele, "ele");
            let obj = { id: ele.afterCorrelationJudgmentTableId };
            let newEle = { ...obj, pageNumber: 1, pageSize: 9999 };
            let tableItem = await this.glpzGetAllRightTableAndRowDataFn(newEle);
            let newItems = { ...ele, ...tableItem };
            newArr[index] = { ...newItems };
            this.currentLeftItemArr = newArr;
          } else {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            let newArr = JSON.parse(JSON.stringify(this.currentLeftItemArr));
            console.log(ele, "ele");
            let newEle = { ...ele, pageNumber: 1 };
            let tableItem = await this.glpzGetAllRightTableAndRowDataFn(newEle);
            let newItems = { ...ele, ...tableItem };
            newArr[index] = { ...newItems };
            this.currentLeftItemArr = newArr;
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 表格中每一行的编辑
    onRightTableEditFn(item, ele, index) {
      let dataInfoObj = JSON.parse(item.dataInfo);
      let dataContentList = [];
      for (let k in dataInfoObj) {
        let name = k;
        let value = dataInfoObj[k];
        let rowNameArr = ele.rowArr.filter((item22) => {
          return item22.columnCode === k;
        });
        let rowName = "";
        let isEdit = false;
        if (rowNameArr.length) {
          rowName = rowNameArr[0].columnName;
          isEdit = true;
        }
        dataContentList.push({ name, value, rowName, isEdit });
      }
      this.editDialogObj = {
        currentItem: ele,
        currentIndex: index,
        fromItem: { ...item, dataContentList },
      };
      console.log(this.editDialogObj);
      this.isShowEditDialogFn(true);
    },
    onRightTableEditFnBot(item, ele, index) {
      console.log(item, "item");
      let dataInfoObj = item.dataInfo;
      let dataContentList = [];
      for (let k in dataInfoObj) {
        let name = k;
        let value = dataInfoObj[k];
        let rowNameArr = ele.afterCorrelationJudgmentColumn.filter((item22) => {
          return item22.columnCode === k;
        });
        let rowName = "";
        let isEdit = false;
        if (rowNameArr.length) {
          rowName = rowNameArr[0].columnName;
          isEdit = true;
        }
        dataContentList.push({ name, value, rowName, isEdit });
      }
      this.editDialogObj = {
        currentItem: ele,
        currentIndex: index,
        fromItem: { ...item, dataContentList },
      };
      this.isShowEditDialogFn(true);
    },
    // 右侧table的勾选
    handleSelectionRightTableChange(val, index) {
      let item = JSON.parse(JSON.stringify(this.currentLeftItemArr))[index];
      let checkoutArr = val;
      let newItem = { ...item, checkoutArr };
      this.currentLeftItemArr = this.currentLeftItemArr.map((item, indey) => {
        if (indey === index) {
          return newItem;
        } else {
          return item;
        }
      });
    },
    // 判断是否可以勾选
    isNotCheckoutTableCheckoutItemFn() {
      let arr = JSON.parse(JSON.stringify(this.currentLeftItemArr));
      let actEle = arr.filter((item) => {
        return item.isActive;
      })[0];
      if (arr.length) {
        let flag =
          arr.flatMap((item) => {
            if (item?.dataTypeId === actEle?.dataTypeId) {
              if (item.checkoutArr.length && !item.isActive) {
                return ["111"];
              } else {
                return [];
              }
            } else {
              return [];
            }
          }).length > 0;
        return !flag;
      } else {
        return false;
      }
    },
    // 右上角的判证生成按钮
    isPanzhengShengchengSubmitFn() {
      let arr = this.currentLeftItemArr.flatMap((item) => {
        if (item.checkoutArr.length) {
          return [item];
        } else {
          return [];
        }
      });
      if (arr.length) {
        let flag = arr.some((item) => {
          return item.dataTypeId === "5"; //注意注意注意  以后会可能会换 暂时是5 为态势数据 ！！！！！！！！
        });
        if (!flag) {
          this.$message({
            message: "请先选择态势数据~",
            type: "warning",
          });
        } else {
          if (arr.length > 1) {
            this.panzhengshengchengCurrentArr = arr;

            // 不显示弹窗
            // this.isShowPanzhengDialogFn(true)
            this.typeName = this.extractNames(this.currentLeftItemArr).join(
              "、"
            );
            // 替换右侧内容区域 弹窗内容与mapDialog拼接显示
            this.mapDialogData = true;

            // this.$refs.mapDialog.dialogVisible = true
          } else {
            this.$message({
              message: "请先选择除态势数据以外的其他数据~",
              type: "warning",
            });
          }
        }
      }
    },
    // 提取所有name字段的函数
    extractNames(array) {
      console.log(array, "array");
      let names = [];

      // 遍历二维数组的每个内部数组
      array.forEach((innerArray) => {
        // 提取name并添加到names数组中
        if (innerArray.hasOwnProperty("fatherName")) {
          names.push(innerArray.fatherName);
        }
      });

      return names;
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~修改弹窗的逻辑~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 修改弹窗的显隐
    isShowEditDialogFn(flag) {
      this.editDialogFlag = flag;
    },
    // 修改弹窗的取消按钮
    editDialogCancelFn() {
      this.isShowEditDialogFn(false);
    },
    // 修改弹窗的确认按钮
    async editDialogSubmitFn() {
      console.log(this.ispanzheng, "ispanzheng");

      const OBJ = JSON.parse(JSON.stringify(this.editDialogObj));

      let ele = OBJ.currentItem;
      let index = OBJ.currentIndex;
      let dataInfoObj = {};
      OBJ.fromItem.dataContentList.map((item) => {
        let objK = item.name;
        let objV = item.value;
        dataInfoObj[objK] = objV;
      });
      let data = {
        id: OBJ.fromItem.id,
        dataInfo: JSON.stringify(dataInfoObj),
      };
      console.log(data, "data");
      let res = await this.$api.glpzRightTableItemUpdateApi(data);
      if (res.code === 200) {
        if (this.ispanzheng) {
          let value = {
            id: ele.afterCorrelationJudgmentTableId,
            pageSize: 1,
            pageNumber: 9999,
          };
          console.log(ele, "ele");
          this.glpzGetRightTableDataFn(value);
          this.isShowEditDialogFn(false);
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        } else {
          let newArr = JSON.parse(JSON.stringify(this.currentLeftItemArr));
          let newEle = { ...ele };
          let tableItem = await this.glpzGetAllRightTableAndRowDataFn(newEle);
          let newItems = { ...ele, ...tableItem };
          newArr[index] = { ...newItems };
          this.currentLeftItemArr = newArr;
          this.isShowEditDialogFn(false);
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        }
      } else {
        this.$message.error(res.message);
      }
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~判证弹窗逻辑~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 判证弹窗显隐
    isShowPanzhengDialogFn(flag) {
      this.panzhengDialogFlag = flag;
    },
    // 判证弹窗确认
    async onShaixuanSubmitFn() {
      if (!this.form.timeArr.length) {
        this.$message({
          message: "日期筛选不能为空~",
          type: "warning",
        });
        return;
      }
      if (!this.form.lonLatItem1.length) {
        this.$message({
          message: "最大经纬度不能为空~",
          type: "warning",
        });
        return;
      }
      if (!this.form.lonLatItem2.length) {
        this.$message({
          message: "最小经纬度不能为空~",
          type: "warning",
        });
        return;
      }
      if (this.panzhengshengchengCurrentArr.length) {
        let situationTableArr = this.panzhengshengchengCurrentArr.filter(
          (item) => {
            return item.dataTypeId === "5";
          }
        );
        let situationTableId = situationTableArr.length
          ? situationTableArr[0].id
          : null;
        let situationData = null;
        if (situationTableId) {
          situationData = situationTableArr[0].checkoutArr.map((item) => {
            return item.id;
          });
        }
        let signalTableArr = this.panzhengshengchengCurrentArr.filter(
          (item) => {
            return item.dataTypeId === "1";
          }
        );
        let signalTableId = signalTableArr.length ? signalTableArr[0].id : null;
        let signalData = null;
        if (signalTableId) {
          signalData = signalTableArr[0].checkoutArr.map((item) => {
            return item.id;
          });
        }
        let targetTableArr = this.panzhengshengchengCurrentArr.filter(
          (item) => {
            return item.dataTypeId === "7";
          }
        );
        let targetTableId = targetTableArr.length ? targetTableArr[0].id : null;
        let targetData = null;
        if (targetTableId) {
          targetData = targetTableArr[0].checkoutArr.map((item) => {
            return item.id;
          });
        }
        let data = {
          startTime: this.form.timeArr[0],
          endTime: this.form.timeArr[1],
          minLongitude: this.form.lonLatItem2[0],
          minLatitude: this.form.lonLatItem2[1],
          maxLongitude: this.form.lonLatItem1[0],
          maxLatitude: this.form.lonLatItem1[1],
          situationTableId,
          situationData,
          signalTableId,
          signalData,
          targetTableId,
          targetData,
        };
        let res = await this.$api.glpzPzscSuanfaApi(data);
      }

      // this.isShowPanzhengDialogFn(false);

      // 44
    },
    formatDate(timestamp) {
      const date = new Date(timestamp);
      let year = date.getFullYear();
      let month = String(date.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的
      let day = String(date.getDate()).padStart(2, "0");
      let hours = String(date.getHours()).padStart(2, "0");
      let minutes = String(date.getMinutes()).padStart(2, "0");
      let seconds = String(date.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    async onShaixuanSubmitFn1() {
      console.log(this.form, "确认按钮this.form");
      // if (this.form.startTime) {
      //   this.form.startTime = this.formatDate(this.form.startTime);
      // }
      // if (this.form.endTime) {
      //   this.form.endTime = this.formatDate(this.form.endTime);
      // }
      let data = {};
      if (this.panzhengshengchengCurrentArr.length) {
        let situationTableArr = this.panzhengshengchengCurrentArr.filter(
          (item) => {
            return item.dataTypeId === "5";
          }
        );
        let situationTableId = situationTableArr.length
          ? situationTableArr[0].id
          : null;
        let situationData = null;
        if (situationTableId) {
          situationData = situationTableArr[0].checkoutArr.map((item) => {
            return item.id;
          });
        }
        let signalTableArr = this.panzhengshengchengCurrentArr.filter(
          (item) => {
            return item.dataTypeId === "1";
          }
        );
        let signalTableId = signalTableArr.length ? signalTableArr[0].id : null;
        let signalData = null;
        if (signalTableId) {
          signalData = signalTableArr[0].checkoutArr.map((item) => {
            return item.id;
          });
        }
        let targetTableArr = this.panzhengshengchengCurrentArr.filter(
          (item) => {
            return item.dataTypeId === "7";
          }
        );
        let targetTableId = targetTableArr.length ? targetTableArr[0].id : null;
        let targetData = null;
        if (targetTableId) {
          targetData = targetTableArr[0].checkoutArr.map((item) => {
            return item.id;
          });
        }
        data = {
          situationTableId,
          situationData,
          signalTableId,
          signalData,
          targetTableId,
          targetData,
        }; //存放表单选中的值
      }
      let obj = { ...this.form, ...data };
      console.log(obj, "obj======");
      // let res = await this.$api.glpzPzscSuanfaApi(obj);
      this.$api
        .glpzPzscSuanfaApi(obj)
        .then((res) => {
          this.$message({
            type: "success",
            message: "判证成功!",
          });
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: err,
            duration: 5 * 1000,
          });
        })
        .finally(() => {
          this.getHistoryList();
          // window.location.reload(); //刷新页面(临时方案)
        });

      // console.log(res, "967");
    },
    // 关闭判证生成时候的 重置data
    resetPzscDataFn() {
      this.form = {
        situationDataDateColumn: "更新日期", //态势数据日期表头
        situationDataTimeColumn: "更新时间", //态势数据时间表头
        situationDataLongitudeColumn: "经度", //经度表头
        situationDataLatitudeColumn: "纬度", //纬度表头
        situationDataTargetNameColumn: "目标名称", //名称表头
        signalDataStartDateColumn: "开始日期", //信号数据开始日期表头
        signalDataStartTimeColumn: "开始时间", //信号数据开始时间表头
        signalDataEndDateColumn: "结束日期", //信号数据结束日期表头
        signalDataEndTimeColumn: "结束时间", //信号数据结束时间表头
        startTime: "", //开始时间
        endTime: "", //结束时间
        minLongitude: "100.0", //最小经度
        maxLongitude: "129.0", //最大经度
        minLatitude: "20.0", //最小纬度
        maxLatitude: "40.0", //最大纬度
        centerLongitude: "105", //圆心经度
        centerLatitude: "30", //圆心纬度
        radius: "10000", //圆的半径
        nameList: "", //名称列表
      };
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~导入弹窗~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 获取导入弹窗的级联option
    async glpzGetDaoruCascaderFn() {
      let res = await this.$api.glpzGetDaoruCascaderApi();
      this.daoruCascaderOptions = res.result.map((item) => {
        item.dataTableVoList = item.dataTableVoList.map((item2) => {
          return {
            ...item2,
            UID: `${item2.dataTableId},${item2.dataTableName}`,
          };
        });
        return {
          UID: `${item.dataTypeId},${item.dataTypeName}`,
          dataTableName: item.dataTypeName,
          dataTableId: item.dataTypeId,
          ...item,
        };
      });
    },
    // 导入弹窗显隐
    isShowDaoruDialogFlagFn(flag) {
      this.daoruFileFlag = flag;
    },
    // 重置导入弹窗中的值
    resetDaoruDataFn() {
      this.daoruCascaderOptions = [];
      this.daoruCascaderArr = [];
      this.daoruNameInputVal = "";
      this.daoruCreateTimeArr = [];
      this.daoruTabbarAndTableDataArr = [];
    },
    // 导入弹窗的搜索按钮
    async getSearchDaoruTablesDataFn() {
      this.daoruTabbarAndTableDataArr = [];
      if (this.daoruCascaderArr.length) {
        let arr = this.daoruCascaderArr.map((item) => {
          let tabbarName = item
            .map((item2) => {
              return item2.split(",")[1];
            })
            .join("/");
          let fatherIdStrs = item[0];
          let myIdStrs = item[1];
          return {
            tabbarName,
            rowArr: [],
            tableData: [],
            pageSize: 10,
            pageNumber: 1,
            pageTotal: 0,
            fatherIdStrs,
            myIdStrs,
            isActive: false,
            checkoutArr: [],
          };
        });
        let firstItem = JSON.parse(JSON.stringify(arr[0]));
        let newFirstItem = await this.getDaoruRowAndTableDataFn(firstItem);
        arr[0] = { ...newFirstItem, isActive: true };
        this.daoruTabbarAndTableDataArr = arr;
      } else {
        this.$message({
          message: "请先选择类型再进行搜索~",
          type: "warning",
        });
      }
    },
    // 设置激活的tabbar下的table和row的数据
    async getDaoruRowAndTableDataFn(item) {
      let dataTableId = item.myIdStrs.split(",")[0];
      let ROWRES = await this.glpzGetDaoruTableRowFn(dataTableId);
      let TABLERES = await this.glpzGetDaoruTableDataFn(dataTableId, item);
      let newItem = {
        ...item,
        rowArr: ROWRES,
        tableData: TABLERES.content,
        pageTotal: TABLERES.totalSize,
      };
      return newItem;
    },
    // 获取导入中的table-row
    async glpzGetDaoruTableRowFn(dataTableId) {
      let params = {
        dataTableId,
      };
      let res = await this.$api.glpzGetDaoruTableRowApi(params);
      let newArray11 = res.result.sort((a, b) => {
        return a.columnIndex - b.columnIndex;
      });
      return newArray11;
    },
    // 获取导入中的table-data
    async glpzGetDaoruTableDataFn(dataTableId, item) {
      let params = {
        pageNum: item.pageNumber,
        pageSize: item.pageSize,
        dataTableId,
      };
      let res = await this.$api.glpzGetDaoruTableDataApi(params);
      return JSON.parse(res.result);
    },
    // 切换导入的tabbar-item
    async changeActiveDaoruTableDataFn(ele, index) {
      if (!ele.isActive) {
        let arr = JSON.parse(JSON.stringify(this.daoruTabbarAndTableDataArr));
        let newArr = arr.map((item) => {
          return { ...item, isActive: false };
        });
        if (!ele.rowArr.length) {
          let newItems = await this.getDaoruRowAndTableDataFn(ele);
          newArr[index] = { ...newItems, isActive: true };
          this.daoruTabbarAndTableDataArr = newArr;
        } else {
          newArr[index] = { ...newArr[index], isActive: true };
          this.daoruTabbarAndTableDataArr = newArr;
        }
      }
    },
    // table-checkout
    handleSelectionChange(val, index) {
      let item = JSON.parse(JSON.stringify(this.daoruTabbarAndTableDataArr))[
        index
      ];
      let checkoutArr = val;
      let newItem = { ...item, checkoutArr };
      this.daoruTabbarAndTableDataArr = this.daoruTabbarAndTableDataArr.map(
        (item, indey) => {
          if (indey === index) {
            return newItem;
          } else {
            return item;
          }
        }
      );
    },
    // 确定导入
    async glpzDaoruSubmitFn() {
      if (this.daoruTabbarAndTableDataArr.length) {
        let flag = this.daoruTabbarAndTableDataArr.some((item) => {
          return item.checkoutArr.length > 0;
        });
        if (!flag) {
          this.$message({
            message: "请先勾选要导入的文件~",
            type: "warning",
          });
        } else {
          let data = this.daoruTabbarAndTableDataArr.flatMap((item) => {
            if (item.checkoutArr.length > 0) {
              let importTableId = item.myIdStrs.split(",")[0];
              let importDataIds = item.checkoutArr.map((item2) => {
                return item2.kid;
              });
              return [{ importTableId, importDataIds }];
            } else {
              return [];
            }
          });
          let res = await this.$api.glpzDaoruSubmitApi(data);
          if (res.code === 200) {
            await this.getLeftTreeAllDataFn();
            this.$message({
              message: "导入成功~",
              type: "success",
            });
            this.isShowDaoruDialogFlagFn(false);
          } else {
            this.$message({
              message: res.message,
              type: "error",
            });
          }
        }
      } else {
        this.$message({
          message: "请先选择导入文件~",
          type: "warning",
        });
      }
    },
    // 导入的table-分页
    async changeDaoruTableFenyeFn(val, ele, index) {
      let newArr = JSON.parse(JSON.stringify(this.daoruTabbarAndTableDataArr));
      let newEle = { ...ele, pageNumber: val };
      let newItems = await this.getDaoruRowAndTableDataFn(newEle);
      newArr[index] = { ...newItems };
      this.daoruTabbarAndTableDataArr = newArr;
      console.log(val, item, index);
    },
    // 导入的table-分页选择器
    async changeDaoruTableFenyeSizeChange(val, ele, index) {
      console.log("分页选择器===", ele);
      let newArr = JSON.parse(JSON.stringify(this.daoruTabbarAndTableDataArr));
      let newEle = { ...ele, pageSize: val };
      let newItems = await this.getDaoruRowAndTableDataFn(newEle);
      newArr[index] = { ...newItems };
      this.daoruTabbarAndTableDataArr = newArr;
    },
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~左侧树结构~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 获取完整的左侧树
    async getLeftTreeAllDataFn() {
      let outTreeRes = await this.glpzGetLeftTreeData111Fn();
      let allTreeArr = await this.getLeftTreeDataFn(outTreeRes);
      this.leftList = allTreeArr;
      this.currentLeftItemArr = [];
    },
    // 获取左侧树的2级
    async getLeftTreeDataFn(bigArr) {
      let res = await this.$api.glpzGetLeftTreeData222Api();
      let arr = bigArr.map((ele) => {
        ele.children = res.result.flatMap((item2) => {
          if (item2.dataTypeId === ele.id) {
            return [item2];
          } else {
            return [];
          }
        });
        return ele;
      });
      return arr;
    },
    // 获取左侧树的一级
    async glpzGetLeftTreeData111Fn() {
      let res = await this.$api.glpzGetLeftTreeData111Api();
      let arr = res.result.map((item) => {
        return {
          id: item.dataTypeId,
          name: item.dataTypeName,
          type: item.databaseType,
          children: [],
        };
      });
      return arr;
    },
    returnBack() {
      this.$router.push({
        path: "suanfashengji",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-pagination__rightwrapper {
  display: flex;
  align-items: center;
}
.gunalianpanzheng_wrap {
  width: 100%;
  height: 100%;
  display: flex;

  .left_wrap {
    flex: 0 0 auto;
    width: 360px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .fenlei_wrap {
      width: 100%;
      flex: 3 1 auto;
      height: 0;
      box-sizing: border-box;
      border: 1px solid #02fff4;
      background: rgba(2, 82, 107, 0.6);
      display: flex;
      flex-direction: column;

      .left_list_wrap {
        box-sizing: border-box;
        padding: 10px 20px;
        flex: 1 1 auto;
        height: 0;
        overflow: hidden;

        .left_list {
          width: 100%;
          height: 100%;
          overflow: auto;

          ::v-deep .bin_collapse_sm {
            & > .el-collapse-item {
              &.is-disabled {
                & > div:first-child {
                  .el-collapse-item__header {
                    background: rgba(0, 94, 123, 0.7);
                    box-shadow: inset 0px 0px 25px 1px #02fff4;
                  }
                }
              }

              & > div:first-child {
                .el-collapse-item__header {
                  background: rgba(0, 94, 123, 0.7);
                  box-shadow: inset 0px 0px 25px 1px #02fff4;
                }
              }
            }
          }

          .list_item {
            width: 100%;
            margin-bottom: 10px;
            cursor: pointer;

            .list_item_sum {
              width: 100%;
              height: 50px;
              display: flex;
              align-items: center;
              background: rgba(0, 94, 123, 0.7);
              box-shadow: inset 0px 0px 25px 1px #02fff4;
              border: 1px solid #02fff4;
              box-sizing: border-box;
              padding: 0 20px;

              .item_name {
                font-size: 18px;
                color: #fff;
                font-weight: 700;
              }
            }

            .sqr {
              width: 22px;
              height: 22px;
              border: 2px solid #02fff4;
              margin-right: 14px;
              position: relative;

              &.act {
                &::after {
                  background-color: #02fff4;
                }
              }

              &::after {
                content: "";
                width: 10px;
                height: 10px;
                background-color: transparent;
                top: 50%;
                left: 50%;
                position: absolute;
                transform: translate(-50%, -50%);
              }
            }

            .sm_list {
              .sm_list_item {
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                background: rgb(3, 23, 34, 0.9);
                border-radius: 0px 0px 0px 0px;
                border: 1px solid #02fff4;
                box-sizing: border-box;
                padding: 0 20px;
                margin: 6px 0;

                .sm_item_name {
                  font-size: 18px;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }

    .his_wrap {
      width: 100%;
      flex: 2 1 auto;
      height: 0;
      margin-top: 16px;
      box-sizing: border-box;
      border: 1px solid #02fff4;
      background: rgba(2, 82, 107, 0.6);
      display: flex;
      flex-direction: column;

      .his_list_wrap {
        flex: 1 1 auto;
        width: 100%;
        height: 0;
        padding: 20px 15px;
        overflow: hidden;
        box-sizing: border-box;

        .his_list {
          width: 100%;
          height: 100%;
          overflow: auto;

          .list_item {
            display: flex;
            height: 40px;
            align-items: center;
            margin-bottom: 5px;

            .item_left {
              width: 0;
              flex: 1 1 auto;
              height: 100%;
              background-color: rgba(3, 23, 34, 0.9);
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 16px;
              color: #02fff4;
              box-sizing: border-box;
              padding: 0 15px;

              .name {
                cursor: pointer;
                &:hover {
                  opacity: 0.8;
                }
              }
            }

            .item_btn {
              flex: 0 0 auto;
              width: 40px;
              height: 40px;
              background-color: rgba(3, 23, 34, 0.9);
              display: flex;
              align-items: center;
              justify-content: center;
              color: #02fff4;
              font-size: 16px;
              margin-left: 4px;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
  }

  .right_wrap {
    flex: 1 1 auto;
    width: 0;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #02fff4;
    background: rgba(2, 82, 107, 0.6);
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;

    .common_title {
      height: 58px;
      padding: 0 20px 0 0;
    }

    .shuju_table_warpper {
      flex: 1 1 auto;
      width: 100%;
      height: 0;
      padding: 20px;
      box-sizing: border-box;

      .shuju_table_wrap {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;

        .shuju_table {
          flex: 1 1 auto;
          width: 100%;
          height: 0;

          .caozuo_btns {
            font-weight: 700;
            color: #02fff4;
            font-size: 24px;

            .icon {
              margin: 0 5px;
              cursor: pointer;

              &:hover {
                opacity: 0.7;
              }
            }
          }
        }

        .shuju_fenye {
          flex: 0 0 auto;
          width: 100%;
          margin-top: 20px;

          .pageBox {
            height: 45px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .bin_fenyeqi {
              display: block !important;
              width: 100%;
            }

            .pageInfo {
              height: 18px;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
              text-align: center;
              font-style: normal;
              text-transform: none;

              .size {
                color: #02fff4;
              }
            }
          }
        }
      }
    }
  }

  .common_title {
    flex: 0 0 auto;
    width: 100%;
    line-height: 58px;
    border-bottom: 1px solid #02fff4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    background-color: rgba(2, 255, 244, 0.15);

    .common_title_name {
      font-size: 20px;
      color: #fff;
      line-height: 58px;
      font-size: 20px;
      padding-left: 12px;
      position: relative;
      font-weight: 700;

      &::after {
        content: "";
        position: absolute;
        width: 5px;
        height: 20px;
        background-color: #02fff4;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .common_title_tabbar {
      display: flex;
      align-items: center;
      font-size: 18px;
      width: 86%;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;

      .title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #fff;
        font-weight: 600;
        font-size: 20px;

        &:before {
          content: "";
          display: block;
          width: 5px;
          height: 20px;
          background: #02fff4;
          margin: 0 10px;
        }
      }

      .tabbar_item {
        flex: 0 0 auto;
        background: rgba(2, 82, 107, 0.62);
        box-shadow: inset 0px 0px 30px 1px #02fff4;
        border: 1px solid #02fff4;
        box-sizing: border-box;
        padding: 0 50px 0 20px;
        color: #aaa;
        position: relative;
        cursor: default;
        margin-left: 10px;

        &:first-child {
          margin-left: 0;
        }

        &.act {
          color: #fff;

          .tabbar_icon {
            color: #02fff4;
          }
        }

        .tabbar_icon {
          cursor: pointer;
          font-size: 20px;
          position: absolute;
          right: 14px;
          font-weight: 700;
          top: 50%;
          color: #01a7ad;
          transform: translateY(-50%);
        }
      }
    }

    .common_title_btns {
      display: flex;
      align-items: center;

      .title_btn_item {
        display: flex;
        align-items: center;

        .calcImport {
          text-indent: 24px;
          position: relative;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../../assets/expot.png") center center no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 10px;
            content: "";
          }
        }

        .panzhengBtn {
          text-indent: 24px;
          position: relative;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../../assets/panzhengshengcheng.png") center
              center no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 12px;
            content: "";
          }
        }
      }

      .close {
        color: #02f7f4;
        font-size: 40px;
        transform: rotate(45deg);
        cursor: pointer;
      }
    }
  }
  .daoru_dialog {
    height: 100vh;
    ::v-deep .el-dialog {
      height: 90vh;
      margin: 5vh auto 0 !important;
      .el-dialog__body {
        max-height: 870px;
        overflow-y: hidden;
        padding: 30px 20px 10px;
      }
    }
  }
  .shaixuan_dialog_wrap {
    width: 100%;

    color: #fff;

    .title {
      font-size: 20px;
      margin-bottom: 34px;
    }

    .shaixuan_from_wrap {
      .shaixuan_form_box {
        width: 90%;
        margin: 0 auto 20px auto;

        .shaixuan_title {
          font-size: 18px;
        }

        .shaixuan_form {
          .shaixuan_item_wrap {
            display: flex;
            align-items: center;
            margin: 30px 0;

            .form_item {
              flex: 1 1 auto;
              display: flex;
              align-items: center;

              .item_name {
                flex: 0 0 auto;
                color: #fff;
                font-size: 16px;
                width: 177px;
              }

              .item_val {
                flex: 1 1 auto;
                width: 0;
              }

              &:nth-child(2) {
                margin-left: 30px;
              }
            }
          }
        }

        .shaixuan_btns {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 40px;

          .bin_button {
            width: 120px;
          }
        }
      }

      .common_table_box {
        margin-top: 20px;
      }
    }
  }

  .daoru_file_wrap {
    .daoru_search_wrap {
      position: relative;

      .daoru_search_list {
        display: flex;
        flex-wrap: wrap;

        .search_item {
          flex: 0 0 auto;
          width: 48%;
          display: flex;
          align-items: center;
          margin-bottom: 16px;

          &:nth-child(odd) {
            margin-right: 4%;
          }

          &:last-child {
            margin-bottom: 0;
          }

          .item_name {
            flex: 0 0 auto;
            width: 96px;
            font-size: 18px;
            color: #fff;
          }

          .item_val {
            flex: 1 1 auto;
            width: 0;
          }
        }
      }

      .daoru_search_btn {
        position: absolute;
        bottom: 0;
        left: 52%;
        width: 84px;

        .bin_button {
          width: 100%;
        }
      }
    }

    .daoru_tabbar_warp {
      width: 100%;
      overflow: auto;
      margin: 25px 0 10px;

      .daoru_tabbar {
        display: flex;
        align-items: center;
        font-size: 18px;
        height: 40px;

        .daoru_tabbar_item {
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          height: 100%;
          background: rgba(2, 82, 107, 0.62);
          box-shadow: inset 0px 0px 30px 1px #02fff4;
          border: 1px solid #02fff4;
          box-sizing: border-box;
          padding: 0 20px;
          color: #aaa;
          position: relative;
          cursor: pointer;
          margin-left: 10px;

          &:first-child {
            margin-left: 0;
          }

          &.act {
            color: #fff;

            .tabbar_icon {
              color: #02fff4;
            }
          }
        }
      }
    }

    .daoru_table_wrap {
      width: 100%;
      height: 630px;

      .daoru_table_item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .daoru_table {
          flex: 1 1 auto;
          width: 100%;
          height: 0;
        }

        .daoru_fenye {
          flex: 0 0 auto;
          margin-top: 14px;

          .pageBox {
            height: 45px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .bin_fenyeqi {
              display: block !important;
              width: 100%;
            }

            .pageInfo {
              height: 18px;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
              text-align: center;
              font-style: normal;
              text-transform: none;

              .size {
                color: #02fff4;
              }
            }
          }
        }
      }
    }
  }
  .daoru_btm_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }

  ::v-deep .bin_datetime {
    .el-input__icon,
    .el-range-separator {
      color: #fff;
    }
  }

  .edit_dialog_wrap {
    .edit_dialog_form {
      .edit_from_item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 26px;

        .item_name {
          flex: 0 0 auto;
          width: 160px;
          font-size: 18px;
          line-height: 40px;
          color: #fff;
        }

        .item_val {
          flex: 1 1 auto;
          width: 0;
          margin-left: 20px;
        }
      }
    }

    .edit_dialog_btns {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 45px 0 20px;

      .bin_button {
        width: 120px;
      }
    }
  }
}
</style>
